<!-- 文件列表 -->
<template>
  <div class="file-box">
    <div class="tab_box">
      <div
        v-for="tab in tab_list"
        :key="tab.id"
        class="tab_item"
        :class="{ active: tab.id === activeTab }"
        @click="handleTabClick(tab)"
      >
        {{ tab.name }}
      </div>
    </div>
    <div v-if="activeTab === 2" class="group_box">
      <contact-group-list
        @change="handleGroupChange"
        :list="groupList"
        :key="2"
      ></contact-group-list>
    </div>

    <div v-if="activeTab === 3" class="contact_box">
      <contact-group-list
        @change="handleContactChange"
        :list="contactList"
        :key="3"
      ></contact-group-list>
    </div>

    <div v-if="activeTab === 4" class="type_box">
      <div
        v-for="item in typeList"
        :key="item.id"
        class="type_item"
        :class="{ active: activeType === item.id }"
        @click="handleTypeClick(item)"
      >
        <svg-icon
          :iconClass="
            activeType === item.id ? item.icon + '-active' : item.icon
          "
        ></svg-icon
        ><span class="name">{{ item.name }}</span>
      </div>
    </div>

    <file-list ref="fileList" class="file-list_box"></file-list>
  </div>
</template>

<script>
import lockr from "lockr"
import { mapState } from "vuex"
import contactGroupList from "../common/contactGroupList.vue"
import fileList from "../content/fileList.vue"
export default {
  name: "filePage",
  components: { fileList, contactGroupList },
  data() {
    return {
      tab_list: [
        {
          id: 1,
          name: "全部"
        },
        {
          id: 2,
          name: "群聊"
        },
        {
          id: 3,
          name: "联系人"
        },
        {
          id: 4,
          name: "类型"
        }
      ],
      activeTab: 1,
      activeType: 1,
      params: {},
      // contactList: [],
      typeList: [
        {
          id: 1,
          name: "文档",
          icon: "doc"
        },
        {
          id: 2,
          name: "图片",
          icon: "image"
        },
        {
          id: 3,
          name: "视频",
          icon: "video"
        },
        {
          id: 4,
          name: "音频",
          icon: "voice"
        },
        {
          id: 5,
          name: "其他",
          icon: "other"
        }
      ]
    }
  },

  computed: {
    ...mapState({
      groupList: (state) => state.groupList,
      userId: (state) => state.userInfo.userId,
      contactList: (state) =>
        [...state.recentTopChatList, ...state.recentChatList].filter(
          (item) => item.isGroup === false
        )
    })
  },

  mounted() {
    this.getList()
  },

  methods: {
    handleTabClick(tab) {
      this.activeTab = tab.id
      if (tab.id === 1) {
        this.params = {}
        this.getList()
      }
      if (tab.id === 4) {
        this.params = {
          filter: {
            fileType: this.activeType
          }
        }
        this.getList()
      }
    },
    handleTypeClick(type) {
      this.activeType = type.id
      this.params = {
        filter: {
          fileType: this.activeType
        }
      }
      this.getList()
    },
    handleGroupChange(data) {
      this.params = {
        filter: {
          isGroup: true,
          receiverId: data.id
        }
      }
      this.getList()
    },
    handleContactChange(data) {
      this.params = {
        filter: {
          isGroup: false,
          receiverId: data.receiverId,
          senderId: this.userId
        }
      }
      this.getList()
    },
    getList() {
      this.$refs.fileList.getFileList(this.params)
    }
  }
}
</script>
<style lang="less" scoped>
.file-box {
  display: flex;
  .tab_box {
    width: 120px;
    height: 100%;
    border-right: 1px solid #c7cdd9;
    padding: 28px 35px;
    background: #f7f8fa;
    .tab_item {
      cursor: pointer;
      margin-bottom: 20px;
    }
    .active {
      font-weight: 600;
      color: rgb(var(--color-primary));
    }
  }

  .file-list_box {
    flex: 1;
  }

  .group_box,
  .contact_box {
    width: 200px;
    height: 100%;
    padding-top: 15px;
    border-right: 1px solid #c7cdd9;
    cursor: pointer;
    background: #f7f8fa;
    overflow: auto;
  }

  .type_box {
    width: 200px;
    height: 100%;
    padding-top: 15px;
    border-right: 1px solid #c7cdd9;
    cursor: pointer;
    background: #f7f8fa;
    .type_item {
      padding: 12px 43px;
      display: flex;
      align-items: center;
      .name {
        font-size: 14px;
        padding-left: 18px;
      }
    }

    .active {
      color: rgb(var(--color-primary));
      background: rgb(225, 230, 240, 0.6);
    }
  }
}
</style>
